<template>
  <div>
    <h2>用户管理(*☻-☻*)</h2><hr>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="用户ID"
          width="80">
      </el-table-column>
      <el-table-column
          prop="username"
          label="登录名称"
          width="100">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别"
          width="80">
      </el-table-column>
      <el-table-column
          prop="hobbyId"
          label="爱好"
          width="180">
      </el-table-column>
      <el-table-column
          prop="avatar"
          label="头像"
          width="180">
        <template v-slot="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.avatar"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="addr"
          label="地址"
          width="180">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号">
      </el-table-column>
      <el-table-column
          prop="state"
          label="账号状态">
        <template v-slot="scope">
          {{scope.row.state==1?'正常':'已锁定'}}
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleUpdate(scope.row.id)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="修改用户" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="登录账号" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="岗位" :label-width="formLabelWidth">
          <el-checkbox-group v-model="postIds">
            <el-checkbox-button v-for="(o,index) in PostData" :label="o.id" :key="o.id">{{o.name}}</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select v-model="dbRoleId" placeholder="请选择角色">
            <el-option
                v-for="(item,index) in RoleData"
                :key="item.value"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="账号状态" :label-width="formLabelWidth">
          <el-button v-if="form.state==1" @click="updateState1" type="success" plain>停用</el-button>
          <el-button v-if="form.state==2" @click="updateState2" type="success" plain>正常</el-button>
        </el-form-item>-->
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option v-for="(o,index) in sexData" :label="o.sysName" :value="o.sysName"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserView",
  data(){
    return{
      tableData:[],
      dialogFormVisible:false,
      formLabelWidth:'120px',
      form:{
        posts:[],
        roleId:''
      },
      dbRoleId:[],
      postIds:[],
      PostData:[],
      checked: true,
      RoleData:[],
      RoleAllData:[],
      roleIds:[],
      sexData:[]
    }
  },methods:{
    /*展示用户列表*/
      userList(){
        this.axios.post("http://172.20.10.5:8003/api/tb-user/userList").then(res=>{
          console.log("user=="+JSON.stringify(res.data))
          this.tableData=res.data
        })
      },/*软删除 del_id改为1*/
    handleDelete(id){
        //alert(id)
      this.axios.post("http://172.20.10.5:8003/api/tb-user/handleDelete?id="+id).then(res=>{
        if(res.data=='success'){
          this.$message.success('删除成功');
          this.userList();
        }
      })
    },handleUpdate(id){
        this.dialogFormVisible=true;
        this.axios.post("http://172.20.10.5:8003/api/tb-user/getByIdUser?id="+id).then(res=>{
          this.form=res.data
        })
    }/*updateState1(){
      this.axios.post("http://172.20.10.5:8003/api/tb-user/updateState1?id="+this.form.id).then(res=>{
        console.log(res.data);
        if(res.data=='success'){
          alert(this.form.state)
        }
      })
    }*/,postList(){
        this.axios.post("http://172.20.10.5:8003/api/tb-post/postList").then(res=>{
          console.log(res.data)
          this.PostData=res.data;
        })
    },updateUser(){
        this.form.roleId=this.dbRoleId;
        this.form.posts=this.postIds.toString();
        console.log(this.form);
        this.axios.post("http://172.20.10.5:8003/api/tb-user/updateUser",this.form).then(res=>{
          if(res.data=='success'){
            this.$message.success("修改成功！！！！");
            this.dialogFormVisible=false;
            this.userList();
          }
        })
    },roleList(){
        this.axios.post("http://172.20.10.5:8003/api/tb-role/roleList").then(res=>{
          console.log(res.data)
          this.RoleData=res.data;
        })
    },sex(){
      this.axios.post("http://172.20.10.5:8003/api/tb-user/sexList").then(res=>{
        this.sexData=res.data
      })
    }
  },created() {
        this.userList();
        this.postList();
        this.roleList();
        this.sex()
  }
}
</script>

<style scoped>


</style>